//boxShadow
@mixin boxShadow($effect: 0 0 18px -3px rgba(0, 0, 0, 0.2)) {
  -webkit-box-shadow: $effect;
  -moz-box-shadow: $effect;
  box-shadow: $effect;
}

//placeholder
@mixin placeholder($color: #ccc) {
  &::-moz-placeholder {
    color: $color;
  }
  // Firefox
  &:-ms-input-placeholder {
    color: $color;
  }
  // Internet Explorer 10+
  &::-webkit-input-placeholder {
    color: $color;
  }
  // Safari and Chrome
}

//transition
@mixin transition($effect: all 1s cubic-bezier(0.23, 1, 0.32, 1)) {
  -webkit-transition: $effect;
  -moz-transition: $effect;
  -ms-transition: $effect;
  -o-transition: $effect;
  transition: $effect;
}

//opacity
@mixin opacity($percent: 0.3) {
  opacity: $percent;
}

//border-radius
@mixin borderRadius($radius: 3px) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

//box-size
@mixin boxSize($box: border-box) {
  -webkit-box-sizing: $box;
  -moz-box-sizing: $box;
  box-sizing: $box;
}

//size
@mixin size($width, $height) {
  width: $width;
  height: $height;
}

// square
@mixin square($long) {
  width: $long;
  height: $long;
}

// 背景渐变
@mixin gradient($direction, $color_base, $color_target) {
  background: $color_base;
  background: -moz-linear-gradient($direction, $color_base, $color_target);
  background: -o-linear-gradient($direction, $color_base, $color_target);
  background: -webkit-linear-gradient($direction, $color_base, $color_target);
  background: linear-gradient($direction, $color_base, $color_target);
}

// 文字截断
@mixin truncation($line: 2) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
}

// 变形
@mixin transform($value) {
  -webkit-transform: $value;
  -moz-transform: $value;
  -ms-transform: $value;
  -o-transform: $value;
  transform: $value;
}

@mixin userSelect() {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
